all repos — caroster @ 7aa17436c75503123cefb51191e8a757883333e9

[Octree] Group carpool to your event https://caroster.io

frontend/pages/e/[uuid]/options.tsx (view raw)

  1import Box from '@mui/material/Box';
  2import Container from '@mui/material/Container';
  3import {useTheme} from '@mui/material/styles';
  4import {PropsWithChildren} from 'react';
  5import pageUtils from '../../../lib/pageUtils';
  6import useEventStore from '../../../stores/useEventStore';
  7import EventLayout, {TabComponent} from '../../../layouts/Event';
  8import {
  9  EventByUuidDocument,
 10  Module,
 11  ModuleDocument,
 12  Enum_Userspermissionsuser_Lang as SupportedLocales,
 13} from '../../../generated/graphql';
 14import CarosterPlusOption from '../../../containers/CarosterPlusOption';
 15import CarosterPlusSettings from '../../../containers/CarosterPlusSettings';
 16import {Typography} from '@mui/material';
 17import {useTranslation} from 'next-i18next';
 18import {getLocaleForLang} from '../../../lib/getLocale';
 19
 20interface Props {
 21  modulesSettings?: Module;
 22  eventUUID: string;
 23  announcement?: string;
 24}
 25
 26const Page = (props: PropsWithChildren<Props>) => {
 27  return <EventLayout {...props} Tab={OptionsTab} />;
 28};
 29
 30const OptionsTab: TabComponent<Props> = ({modulesSettings}) => {
 31  const {t} = useTranslation();
 32  const theme = useTheme();
 33  const event = useEventStore(s => s.event);
 34
 35  if (!event) return null;
 36
 37  const carosterPlusActivated =
 38    modulesSettings?.caroster_plus_enabled &&
 39    event.enabled_modules?.includes('caroster-plus');
 40
 41  return (
 42    <Box position="relative">
 43      <Container
 44        sx={{
 45          p: 4,
 46          mt: 6,
 47          mb: 11,
 48          mx: 0,
 49          [theme.breakpoints.down('md')]: {
 50            p: 2,
 51          },
 52        }}
 53      >
 54        {carosterPlusActivated && <CarosterPlusSettings event={event} />}{' '}
 55        {modulesSettings?.caroster_plus_enabled && !carosterPlusActivated && (
 56          <CarosterPlusOption event={event} modulesSettings={modulesSettings} />
 57        )}
 58        {!modulesSettings?.caroster_plus_enabled && (
 59          <Typography variant="overline">{t`options.no_module`}</Typography>
 60        )}
 61      </Container>
 62    </Box>
 63  );
 64};
 65
 66export const getServerSideProps = pageUtils.getServerSideProps(
 67  async (context, apolloClient) => {
 68    const {uuid} = context.query;
 69    const {host = ''} = context.req.headers;
 70    let event = null;
 71    let modulesSettings = null;
 72
 73    // Fetch event
 74    try {
 75      const {data} = await apolloClient.query({
 76        query: EventByUuidDocument,
 77        variables: {uuid},
 78      });
 79      event = data?.eventByUUID?.data;
 80    } catch (error) {
 81      return {
 82        notFound: true,
 83      };
 84    }
 85
 86    // Fetch modules settings
 87    try {
 88      const {data} = await apolloClient.query({
 89        query: ModuleDocument,
 90        variables: {locale: context.locale},
 91      });
 92      modulesSettings = data?.module?.data?.attributes || {};
 93
 94      const {caroster_plus_description, caroster_plus_name} = modulesSettings;
 95
 96      if (
 97        caroster_plus_description &&
 98        caroster_plus_name &&
 99        String(caroster_plus_description).length === 0 &&
100        String(caroster_plus_name).length === 0
101      ) {
102        console.warn(
103          'Module settings are not set for locale: ',
104          context.locale,
105          ' fallback to English'
106        );
107        const {data: enData} = await apolloClient.query({
108          query: ModuleDocument,
109          variables: {locale: SupportedLocales['en']},
110        });
111        modulesSettings = enData?.module?.data?.attributes;
112      }
113    } catch (error) {
114      console.error(error);
115    }
116
117    const description = await getLocaleForLang(
118      event?.attributes?.lang,
119      'meta.description'
120    );
121
122    return {
123      props: {
124        modulesSettings,
125        eventUUID: uuid,
126        metas: {
127          title: event?.attributes?.name || '',
128          description,
129          url: `https://${host}${context.resolvedUrl}`,
130        },
131      },
132    };
133  }
134);
135export default Page;